<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ButtonStyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/NumberStyle.css"/>
	</head>
	<body>
		<div class="button" id="button">
			<input type="button" name="easy" id="easy" value="简单" />
		    <input type="button" name="middle" id="middle" value="中等" />
		    <input type="button" name="hard" id="hard" value="困难" />
		</div>
		<div class="page1" id="page1" style="display: none;">
			<div class="set">
			    <input type="text" name="num" id="num"  />
		        <input type="button" name="btn1" id="btn1" value="提交" />
		    </div>
		
		<!--<label for="#" id="result"></label>-->
		    <div class="result">
			<!--剩余-->
			    <input type="text" name="times" id="times" value="6" />
			<!--历史-->
			    <input type="text" name="result" id="result" placeholder="请输入一个数字"/>
			    <input type="button" name="reload" id="reload" value="重置" style="display: none;"/>
		    </div>
		</div>
		<script type="text/javascript">
		//获取三个按钮
		    var oEasy=document.getElementById("easy");
		    var oMiddle=document.getElementById("middle");
		    var oHard=document.getElementById("hard");
		    var oPage1=document.getElementById("page1");
		    var oButton=document.getElementById("button");
		    
		    //下面第一行为正确答案
		    var oTrueNumber;
			var oNum=document.getElementById("num");
			var oBtn=document.getElementById("btn1");
			var oHistory=document.querySelector(".result #result");
			var oTime=document.getElementById("times");
            var oReload=document.getElementById("reload");
			oBtn.addEventListener('click',clickIt);
			oReload.addEventListener('click',reload);
			oTime.disabled="true";
			oEasy.addEventListener('click',page1);
			oMiddle.addEventListener('click',page1);
			oHard.addEventListener('click',page1);
			function page1 () {
				oPage1.style.display="block";
				oButton.style.display="none";
			}
//			if(oMiddle.onclick)
//			   oTrueNumber=Math.floor(Math.random()*50);
//			if(oHard.onclick)
//			   oTrueNumber=Math.floor(Math.random()*100);
            oEasy.onclick=function (){
            	oTrueNumber=Math.floor(Math.random()*10);
            	console.log(oTrueNumber);
            }
            oMiddle.onclick=function (){
            	oTrueNumber=Math.floor(Math.random()*50);
            	console.log(oTrueNumber);
            }
            oHard.onclick=function (){
            	oTrueNumber=Math.floor(Math.random()*100);
            	console.log(oTrueNumber);
            }
			function clickIt () {
					if(oNum.value>oTrueNumber)
				        oHistory.value="有点偏大";
				    if(oNum.value<oTrueNumber)
				        oHistory.value="有点偏小";
				    if(oNum.value==oTrueNumber)
				        oHistory.value="恭喜你，答对了！！！";
				        oTime.value-=1;
				    if(oNum.value=="")
				        alert="你是智障吗？赶快给我个数！";
				    if(!(oNum.value>="0"&&oNum.value<="9")){
				        oHistory.value="输入有误，请重新输入";
				        oTime.value++;
				       }
				    if(oTime.value==0)
				        oReload.style.display="block";
				    	
				    if(oTime.value<0){
				    	oTime.value++;
				    	oHistory.value="你的次数已用完";
				    }
				    oNum.value=""; 
			}
			function reload () {
				oTime.value="6";
				oTrueNumber=Math.floor(Math.random()*10);
				oReload.style.display="none";
			}
		</script>
	</body>
</html>
